웹팩 기본 개념 정리

April 08, 2020

웹팩이란?

프론트엔드 프레임워크에서 가장 많이 사용하는 모듈 번들러(Module Bundler) 입니다.모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

※ 빌드, 번들링, 변환 이 세 단어는 모두 같은 의미입니다.

웹팩 기본 세팅

`webpack.config.js`

const path = require('path);

module.exports = {
    // 모듈 네임
    name: 'word-relay-setting',
    // 웹팩 실행 모드: development, production, none
    mode: 'development',
    devtool: 'eval',
    resolve: {
        // webpack에서 모듈을 읽어올 때 파일 확장자 체크
        extensions: ['.js', '.jsx']
    }

    // 입력
    entry: {
        app: ['./client', 'WordRelay'],
    },

    module: {
        rules: [{
            test:/\.jsx?/, // 적용할 파일 체크
            loader: 'babel-loader',
            options: {
                presets: [
                    ['babel/preset-env',{
                        targets: {
                            browsers: ['last 2 chrome versions']
                        }
                    }
                ], '@babel/preset-react'],
                plugins: ['@babel/plugin-proposal-class-properties']
                // class형 컴포넌트에서 state = {} 문법을 사용할 때 필요
            }
        }]
    }, // 입력받은 모듈에 모듈을 적용
    plugins: [],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    } // 출력
}

주요 웹팩 기능 설명

mode

mode의 설정값에 따라 웹팩이 다르게 실행되며, 실행 모드는 3가지가 있습니다.

none: 모드 설정 X
development: 개발에 좀 더 편하게 웹팩 로그나 결과물이 보입니다.
production: 성능 최적화 작업을 합니다.(파일 압축, 빌드)

entry

웹 애플리케이션이 실행될 수 있게 빌드를 하기 위해 모든 소스의 경로가 담겨져 있어야 할 영역입니다.

output

웹팩이 entry 속성을 참고하여 빌드를 한 후 결과물이 저장되는 경로를 나타냅니다.
filename과 path 속성을 추가해주어야 합니다.

Loader

웹팩이 웹 애플리케이션을 해석할 때 자바스크립트가 아닌 소스(html, css, sass, images, babel 등)들을 변환할 수 있게 도와주는 속성입니다.
webpack.config.js 내에선 module 속성으로 표현한다.

Loader 표현 방법

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['css-loader', 'sass-loader'],
    },
  ]
}

좀 더 다양한 옵션을 추가해서 표시할 수도 있다.

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: { modules: true },
        },
        { loader: 'sass-loader' },
      ],
    },
  ]
}

Plugin

웹팩의 기본 기능에 추가적인 기능을 추가하는 속성입니다.

※ Plugin과 Loader의 차이점

로더는 파일을 해석하고 변환하는 과정에 관여한다면 플러그인은 결과물의 형태를 바꾼다고 생각할 수 있습니다.

플러그인 속성은 배열의 성격을 띄고 있고 그 안엔 생성자 함수로 생성된 객체 인스턴스만 추가할 수 있습니다.

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [new HtmlWebpackPlugin(), new webpack.ProgressPlugin()],
}

babel 적용 방법

@babel/core: 바벨의 가장 핵심적인 내용이 담긴 모듈
@babel/preset-env: 사용자의 브라우저에 맞게 최신 문법을 예전 문법으로 바꿔줌
@babel/preset-react: 바벨을 리액트에서 사용할 수 있게해주는 모듈(jsx 지원)
babel-loader: 바벨과 웹팩을 연결해줌.

Written by@RedbeanMilk

프론트 엔드 개발 공부한 내용을 블로그에 정리합니다.

GitHub